<template>
    <div>
        <section class="content-header">应急准备管理&nbsp;/&nbsp;应急物资管理</section>
        <section class="select-body clearfix">
            <div class="col-md-2 clearfix">
                <div class="form-group">
                    <label class="col-sm-4 control-label">物资名称：</label>
                    <div class="col-sm-8">
                        <input
                            type="text"
                            class="form-control"
                            id
                            size="20"
                            placeholder="请输入物资名称"
                            v-model="selectData.goodsName"
                        >
                    </div>
                </div>
            </div>
            <div class="col-md-2 clearfix">
                <div class="form-group">
                    <label class="col-sm-4 control-label">物资编号：</label>
                    <div class="col-sm-8">
                        <input
                            type="text"
                            class="form-control"
                            id
                            size="20"
                            placeholder="请输入物资编号"
                            v-model="selectData.goodsId"
                        >
                    </div>
                </div>
            </div>
            <div class="col-md-2 clearfix">
                <dept v-model="selectData.deptId"/>
            </div>
            <div class="col-md-2 clearfix">
                <person :deptId="selectData.deptId" v-model="selectData.personId"/>
            </div>
            <div class="col-md-2 clearfix">
                <button type="button" class="btn btn-primary" @click="$refs.page.getList(1)">搜索</button>
            </div>
        </section>
        <section class="main">
            <div class="box">
                <div class="row" style="margin:0">
                    <div class="col-md-1 deal">
                        <router-link :to="{path:'addMaterial'}">
                            <button type="button" class="btn btn-primary">
                                <i class="fa fa-plus" aria-hidden="true"></i>新增
                            </button>
                        </router-link>
                    </div>
                    <div class="col-md-1 deal">
                        <button type="button" class="btn btn-primary" @click="removeBatch()">
                            <i class="fa fa-times" aria-hidden="true"></i>批量删除
                        </button>
                    </div>
                </div>
            </div>
        </section>
        <section class="main">
            <div class="box">
                <div class="box-body">
                    <table
                        id="example"
                        class="table table-bordered table-hover"
                        style="font-size:14px"
                    >
                        <thead style="font-weight:700">
                            <tr>
                                <td>
                                    <input
                                        type="checkbox"
                                        :checked="list.length===deleteId.length && deleteId.length"
                                        @click="checkedAll"
                                    >
                                </td>
                                <td>物资编号</td>
                                <td>物资名称</td>
                                <td>物资数量</td>
                                <td>有效期</td>
                                <td>主管部门</td>
                                <td>负责人</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-if="list.length==0">
                                <td colspan="999">暂无数据</td>
                            </tr>
                            <tr v-for="item in list" :key="item.value">
                                <td>
                                    <input
                                        type="checkbox"
                                        :checked="deleteId.indexOf(item.id)>=0"
                                        name="checkboxinput"
                                        class="input-checkbox"
                                        @click="checkedOne(item.id)"
                                    >
                                </td>
                                <td>{{item.goodsid}}</td>
                                <td>{{item.goodsname}}</td>
                                <td>{{item.num}}</td>
                                <td>{{item.exp}}</td>
                                <td>{{item.sysDept.name}}</td>
                                <td>{{item.sysPerson.personName}}</td>
                                <td style="width:10%">
                                    <router-link
                                        :to="{path:'detailsMaterial',query:{id:item.id}}"
                                    >查看</router-link>
                                    <i style="width:30px;display:inline-block"></i>
                                    <router-link :to="{path:'updateMaterial',query:{id:item.id}}">修改</router-link>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="col-md-4 col-md-offset-7" style="margin-top:50px;">
                        <ctrlPage :setPage="getList" :type="type" ref="page"/>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import dept from "@/components/common/emergency/dept.vue";
import person from "@/components/common/emergency/person.vue";
import ctrlPage from "@/components/common/ctrlPage.vue";

export default {
    data() {
        return {
            type: "total, prev, pager, next, jumper",
            total: "",
            list: [],
            deleteId: [],
            deleteList: "",
            isCheckedAll: false,
            selectData: {
                goodsName: "",
                goodsId: "",
                deptId: "",
                personId: ""
            }
        };
    },
    components: {
        dept,
        person,
        ctrlPage
    },
    mounted() {
        this.$refs.page.getList(1);
    },
    watch: {
        deleteId() {
            this.deleteList = "";
            this.deleteId.forEach(item => {
                this.deleteList += `${item},`;
            });
            this.deleteList = this.deleteList.substr(
                0,
                this.deleteList.length - 1
            );
        },
        "selectData.deptId"() {
            this.selectData.personId = "";
        }
    },
    methods: {
        //获取列表数据
        getList(pageIndex, pageSizes, callback) {
            this.$api.zhunbei
                .goodsList({
                    pageNum: pageIndex || 1,
                    pageSize: pageSizes || 10,
                    goodsName: this.selectData.goodsName,
                    goodsId: this.selectData.goodsId,
                    deptId: this.selectData.deptId,
                    personId: this.selectData.personId
                })
                .then(res => {
                    if (res.success) {
                        this.list = res.data.list;
                        this.total = res.data.total;
                        callback(this.list, this.total);
                    }
                });
        },
        //是否选择
        checkedOne(id) {
            let idIndex = this.deleteId.indexOf(id);
            if (idIndex >= 0) {
                //如果已经包含就去除
                this.deleteId.splice(idIndex, 1);
            } else {
                //如果没有包含就添加
                this.deleteId.push(id);
            }
        },
        //控制全选按钮
        checkedAll(e) {
            this.isCheckedAll = e.target.checked;
            if (this.isCheckedAll) {
                //全选时
                this.deleteId = [];
                this.list.forEach(item => {
                    this.deleteId.push(item.id);
                });
            } else {
                this.deleteId = [];
            }
        },
        //批量删除
        removeBatch() {
            if (this.deleteList != "") {
                // console.log(this.deleteList)
                this.$api.zhunbei
                    .delGoods({ ids: this.deleteList })
                    .then(res => {
                        if (res.success) {
                            // console.log(res);
                            this.$$message({
                                message: "删除成功！",
                                type: "success"
                            });
                            this.$refs.page.getList(1);
                        }
                    });
            } else {
                this.$$message({
                    message: "请选择要删除的内容",
                    type: "warning"
                });
            }
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.deal {
    padding: 10px;
    text-align: center;
    cursor: pointer;
}
.control-label {
    padding: 0;
    line-height: 34px;
    text-align: right;
}
</style>
